<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="tableData.projectName" name="1" ref="listofProjects">
        <div style="margin: 10px 10px 15px 0px;">{{ tableData.jobId }}</div>
        <div style="overflow: hidden;" v-if="tableData.checkType == '0'">
          <div style="display:flex;overflow: auto ">
            <div style="margin-bottom: 100px;">
              <p class="p1">开始时间：{{ tableData.scheduleJobStartTime }}</p>
              <p class="p1">结束时间：{{ tableData.scheduleJobEndTime }}</p>
              <div class="keith1">
                <div>任务单号</div>
              </div>
            </div>
            <div>
              <p class="p">
                开始时间：{{ tableData.sampleTaskDivisionStartTime }}
              </p>
              <p class="p">
                结束时间：{{ tableData.sampleTaskDivisionEndTime }}
              </p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.sampleTaskDivisionStartTime == null
                      ? ''
                      : tableData.sampleTaskDivisionEndTime != null
                      ? '#5183be'
                      : 'linear-gradient(to right, #5183be, #d8e0e9)'
                }"
              >
                <div>采样任务分配</div>
              </div>
              <!-- <div
                class="div-button"
                v-if="tableData.sampleTaskDivisionStartTime != null"
              >
                <el-button
                  type="info"
                  style="padding: 5px;width: 140px;background-color: #43586b;"
                  @click="taskList"
                  >任务单下载</el-button
                >
              </div> -->
            </div>
            <!-- <div>
              <p class="p">开始时间：{{ tableData.sceneSampleStartTime }}</p>
              <p class="p">结束时间：{{ tableData.sceneSampleEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.sceneSampleStartTime == null
                      ? ''
                      : tableData.sceneSampleEndTime != null
                      ? '#5183be'
                      : 'linear-gradient(to right, #5183be, #d8e0e9)'
                }"
              >
                <div>现场采样</div>
              </div>
              <div class="div-button">
                <el-button
                  v-if="tableData.sceneSampleStartTime != null"
                  type="info"
                  style="padding: 5px;width: 140px;background-color: #43586b;"
                  @click="allsamplingRecord"
                  >采样记录单下载</el-button
                >
              </div>

              <div
                class="div-button"
                v-for="item in tableData.scheduleJobSecdClassVos"
                :key="item.secdClassId"
              >
                <el-button
                  v-if="tableData.sceneSampleStartTime != null"
                  type="info"
                  style="padding: 5px;width: 140px;background-color: #43586b;"
                  @click="samplingRecord(item)"
                  >{{ item.secdClassName }}</el-button
                >
              </div>
            </div> -->
            <div>
              <p class="p">开始时间：{{ tableData.sampleApproveStartTime }}</p>
              <p class="p">结束时间：{{ tableData.sampleApproveEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.sampleApproveStartTime == null
                      ? ''
                      : tableData.sampleApproveEndTime != null
                      ? '#5183be'
                      : 'linear-gradient(to right, #5183be, #d8e0e9)'
                }"
              >
                <div>现场审核</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.sampleStorageStartTime }}</p>
              <p class="p">结束时间：{{ tableData.sampleStorageEndTime }}</p>
              <div
                id="keith"
                style="background: linear-gradient(to right, #30a8b2, #cae2e4);"
                :style="{
                  background:
                    tableData.sampleStorageStartTime == null
                      ? ''
                      : tableData.sampleStorageEndTime != null
                      ? '#30a8b2'
                      : 'linear-gradient(to right, #30a8b2, #cae2e4)'
                }"
              >
                <div>样品入库</div>
              </div>
              <div class="div-button">
                <el-button
                  v-if="tableData.sampleStorageStartTime != null"
                  type="info"
                  style="padding: 5px;width: 140px;background-color: #43586b;"
                  @click="sampleHandover"
                  >样品交接单下载</el-button
                >
              </div>
            </div>
            <!-- <div>
              <p class="p">
                开始时间：{{ tableData.samplePreparationStartTime }}
              </p>
              <p class="p">
                结束时间：{{ tableData.samplePreparationEndTime }}
              </p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.samplePreparationStartTime == null
                      ? ''
                      : tableData.samplePreparationEndTime != null
                      ? '#30a8b2'
                      : 'linear-gradient(to right, #30a8b2, #dae8e9)'
                }"
              >
                <div>样品制备</div>
              </div>
            </div> -->
            <div>
              <p class="p">
                开始时间：{{ tableData.checkTaskDivisionStartTime }}
              </p>
              <p class="p">
                结束时间：{{ tableData.checkTaskDivisionEndTime }}
              </p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.checkTaskDivisionStartTime == null
                      ? ''
                      : tableData.checkTaskDivisionEndTime != null
                      ? '#29bb9a'
                      : 'linear-gradient(to right, #29bb9a,#dcebe8)'
                }"
              >
                <div>检测任务分配</div>
              </div>
            </div>
            <!-- <div>
              <p class="p">开始时间：{{ tableData.sampleOutboundStartTime }}</p>
              <p class="p">结束时间：{{ tableData.sampleOutboundEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.sampleOutboundStartTime == null
                      ? ''
                      : tableData.sampleOutboundEndTime != null
                      ? '#29bb9a'
                      : 'linear-gradient(to right, #29bb9a,#dcebe8)'
                }"
              >
                <div>样品出库</div>
              </div>
            </div> -->
            <!-- <div>
              <p class="p">开始时间：{{ tableData.checkAssayStartTime }}</p>
              <p class="p">结束时间：{{ tableData.checkAssayEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.checkAssayStartTime == null
                      ? ''
                      : tableData.checkAssayEndTime != null
                      ? '#35ce76'
                      : 'linear-gradient(to right, #35ce76,#d7eae5)'
                }"
              >
                <div>检测分析</div>
              </div>
            </div> -->
            <div>
              <p class="p">
                开始时间：{{ tableData.checkAssayApproveStartTime }}
              </p>
              <p class="p">
                结束时间：{{ tableData.checkAssayApproveEndTime }}
              </p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.checkAssayApproveStartTime == null
                      ? ''
                      : tableData.checkAssayApproveEndTime != null
                      ? '#35ce76'
                      : 'linear-gradient(to right, #35ce76,#d7eae5)'
                }"
              >
                <div>检测分析审核</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.reportMakeStartTime }}</p>
              <p class="p">结束时间：{{ tableData.reportMakeEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.reportMakeStartTime == null
                      ? ''
                      : tableData.reportMakeEndTime != null
                      ? '#71c37f'
                      : 'linear-gradient(to right, #71c37f,#d7eae5)'
                }"
              >
                <div>报告编制</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.reportApproveStartTime }}</p>
              <p class="p">结束时间：{{ tableData.reportApproveEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.reportApproveStartTime == null
                      ? ''
                      : tableData.reportApproveEndTime != null
                      ? '#71c37f'
                      : 'linear-gradient(to right, #71c37f,#d7eae5)'
                }"
              >
                <div>报告审核</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.reportSignStartTime }}</p>
              <p class="p">结束时间：{{ tableData.reportSignEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.reportSignStartTime == null
                      ? ''
                      : tableData.reportSignEndTime != null
                      ? '#71c37f'
                      : 'linear-gradient(to right, #71c37f,#d7eae5)'
                }"
              >
                <div>报告签发</div>
              </div>
              <div class="div-button">
                <el-button
                  v-if="this.tableData.reportSignStartTime != null"
                  type="info"
                  style="padding: 5px;width: 140px;background-color: #43586b;"
                  @click="report"
                  >报告下载</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div style="overflow: hidden;" v-if="tableData.checkType == '1'">
          <div style="display:flex;overflow: auto ">
            <div style="margin-bottom: 100px;">
              <p class="p1">开始时间：{{ tableData.scheduleJobStartTime }}</p>
              <p class="p1">结束时间：{{ tableData.scheduleJobEndTime }}</p>
              <div class="keith1">
                <div>任务单号</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.sendConformityStartTime }}</p>
              <p class="p">结束时间：{{ tableData.sendConformityEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.sendConformityStartTime == null
                      ? ''
                      : tableData.sendConformityEndTime != null
                      ? '#5183be'
                      : 'linear-gradient(to right, #5183be, #d8e0e9)'
                }"
              >
                <div>来样样品合样</div>
              </div>
            </div>

            <div>
              <p class="p">开始时间：{{ tableData.sampleStorageStartTime }}</p>
              <p class="p">结束时间：{{ tableData.sampleStorageEndTime }}</p>
              <div
                id="keith"
                style="background: linear-gradient(to right, #30a8b2, #cae2e4);"
                :style="{
                  background:
                    tableData.sampleStorageStartTime == null
                      ? ''
                      : tableData.sampleStorageEndTime != null
                      ? '#30a8b2'
                      : 'linear-gradient(to right, #30a8b2, #cae2e4)'
                }"
              >
                <div>样品入库</div>
              </div>
            </div>
            <div>
              <p class="p">
                开始时间：{{ tableData.samplePreparationStartTime }}
              </p>
              <p class="p">
                结束时间：{{ tableData.samplePreparationEndTime }}
              </p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.samplePreparationStartTime == null
                      ? ''
                      : tableData.samplePreparationEndTime != null
                      ? '#30a8b2'
                      : 'linear-gradient(to right, #30a8b2, #dae8e9)'
                }"
              >
                <div>样品制备</div>
              </div>
            </div>
            <div>
              <p class="p">
                开始时间：{{ tableData.checkTaskDivisionStartTime }}
              </p>
              <p class="p">
                结束时间：{{ tableData.checkTaskDivisionEndTime }}
              </p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.checkTaskDivisionStartTime == null
                      ? ''
                      : tableData.checkTaskDivisionEndTime != null
                      ? '#29bb9a'
                      : 'linear-gradient(to right, #29bb9a,#dcebe8)'
                }"
              >
                <div>检测任务分配</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.sampleOutboundStartTime }}</p>
              <p class="p">结束时间：{{ tableData.sampleOutboundEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.sampleOutboundStartTime == null
                      ? ''
                      : tableData.sampleOutboundEndTime != null
                      ? '#29bb9a'
                      : 'linear-gradient(to right, #29bb9a,#dcebe8)'
                }"
              >
                <div>样品出库</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.checkAssayStartTime }}</p>
              <p class="p">结束时间：{{ tableData.checkAssayEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.checkAssayStartTime == null
                      ? ''
                      : tableData.checkAssayEndTime != null
                      ? '#35ce76'
                      : 'linear-gradient(to right, #35ce76,#d7eae5)'
                }"
              >
                <div>检测分析</div>
              </div>
            </div>
            <div>
              <p class="p">
                开始时间：{{ tableData.checkAssayApproveStartTime }}
              </p>
              <p class="p">
                结束时间：{{ tableData.checkAssayApproveEndTime }}
              </p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.checkAssayApproveStartTime == null
                      ? ''
                      : tableData.checkAssayApproveEndTime != null
                      ? '#35ce76'
                      : 'linear-gradient(to right, #35ce76,#d7eae5)'
                }"
              >
                <div>检测分析审核</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.reportMakeStartTime }}</p>
              <p class="p">结束时间：{{ tableData.reportMakeEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.reportMakeStartTime == null
                      ? ''
                      : tableData.reportMakeEndTime != null
                      ? '#71c37f'
                      : 'linear-gradient(to right, #71c37f,#d7eae5)'
                }"
              >
                <div>报告编制</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.reportApproveStartTime }}</p>
              <p class="p">结束时间：{{ tableData.reportApproveEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.reportApproveStartTime == null
                      ? ''
                      : tableData.reportApproveEndTime != null
                      ? '#71c37f'
                      : 'linear-gradient(to right, #71c37f,#d7eae5)'
                }"
              >
                <div>报告审核</div>
              </div>
            </div>
            <div>
              <p class="p">开始时间：{{ tableData.reportSignStartTime }}</p>
              <p class="p">结束时间：{{ tableData.reportSignEndTime }}</p>
              <div
                id="keith"
                :style="{
                  background:
                    tableData.reportSignStartTime == null
                      ? ''
                      : tableData.reportSignEndTime != null
                      ? '#71c37f'
                      : 'linear-gradient(to right, #71c37f,#d7eae5)'
                }"
              >
                <div>报告签发</div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as taskServer from "@/api/task";
import * as offermonitorServer from "@/api/offermonitor";

export default {
  data() {
    return {
      activeName: "1",
      tableData: {}
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      var arr = {
        jobId: "",
        checkType: ""
      };
      arr.jobId = this.$route.query.jobId;
      arr.checkType = this.$route.query.checkType;
      taskServer.findScheduleJobOverview(arr).then(res => {
        console.log(res);
        this.tableData = res.result;
      });
    },

    //任务单下载
    taskList() {
      const url =
        "/api/word/downMission?sampTaskId=" + this.tableData.sampleTaskId;
      window.open(url);
    },

    // 采样记录单全部下载
    allsamplingRecord() {
      console.log(this.tableData.taskId);
      var url =
        "/api/word/downBlankSampleRecordByTaskId?taskId=" +
        this.tableData.sampleTaskId;
      window.open(url);
    },

    // 采样记录单个下载
    samplingRecord(item) {
      console.log(item);
      var url =
        "/api/word/downSampleRecordByTaskIdAndSecdClassId?taskId=" +
        this.tableData.sampleTaskId +
        "&secdClassId=" +
        item.secdClassId;
      window.open(url);
    },

    //样品交接单下载
    sampleHandover() {
      var url = "http://mes.jshengzheng.com:9000/train/2024/11/22/交接单_20241122102024A001.docx";
      window.open(url);
    },

    //报告下载
    report() {
      offermonitorServer.trainFile({ type: 4, id: this.tableData.jobId }).then(res => {
        if (res.code === 200) {
          if (res.result.length != 0) {
            var arr = res.result.length - 1;
            var url = res.result[arr].url;
            window.open(url);
          } else {
            this.$message.error("请上传报告！");
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
#keith {
  margin: 0px 10px 3px 0px;
  width: 140px;
  height: 35px;
  display: inline-block;
  background: #d0d0d0;
  transform: skewX(-45deg);
}
#keith div {
  width: 140px;
  padding: 10px;
  color: white;
  text-align: center;
  font-size: 15px;
  transform: skewX(45deg);
}

.keith1 {
  width: 140px;
  display: inline-block;
  margin-right: -7px;
  border-top: 35px solid #3269a0;
  border-left: 0px solid transparent;
  border-right: 35px solid transparent;
}

.keith1 div {
  width: 140px;
  margin-top: -35px;
  padding: 10px;
  color: white;
  text-align: center;
  font-size: 15px;
}

.p {
  font-size: 9px;
  margin: 0px 0px 3px 18px;
}
.p1 {
  font-size: 9px;
  margin: 0px 0px 3px 0px;
}

.div-button {
  padding: 5px 0px 0px 0px;
  margin-left: -18px;
  width: 140px;
}
/*按钮悬浮*/
.el-button:hover {
  background: #a6a9ad !important;
}
</style>
